import React from 'react'
import { NavLink } from 'react-router-dom'
import { connect } from 'react-redux'
import Confirm from './ConfirmDialog'

const mapStateToProps = (state) => {
  return {
    userInfo: state.app.userInfo
  }
}
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    openModal: (msg) => dispatch(global.allActions.appActions.openModal(msg))
  }
}

class RuleDetail extends React.Component<any, any> {
  public constructor(props) {
    super(props)
    this.state = {
      rule: {},
      group: {},
      gameVo: {},
      showConfirm: false
    }
  }

  exitRule() {
    const {ruleId} = this.props.match.params
    const url = `${config.pre}/crowd/conf/${Cookies.get('areaCode')}/${ruleId}/quit`
    const opt = {method: 'DELETE'}
    fetchJson(url, opt).then(data => {
      this.setState({showConfirm: false})
      if (data.result) {
        this.props.openModal('退出失败' + data.message)
        return 
      }
      this.props.openModal('退出成功')
      window.location.hash = '/GroupInfo'
    })
  }

  public componentDidMount() {
    const {ruleId} = this.props.match.params
    const url = `${config.pre}/crowd/conf/${Cookies.get('areaCode')}/${ruleId}/detail`
    const opt = { method: 'GET' }
    fetchJson(url, opt).then(data => {
      console.log(data);
      if (data.result) {
        this.props.openModal(data.message)
        return 
      }
      const rule = data.data.confVo
      const group = data.data.crowdVo
      const gameVo = data.data.gameVo || {}
      this.setState({rule, group, gameVo})
    })
  }

  public render() {
    var {rule, group, gameVo, showConfirm}= this.state
    return <div className="view-page group-view">
      <img src="img/group/group-di.png?v=20181201" className="full pos-abs" alt="" />
      <div className="underbg">
        <div className="group-detail-top text-center">
        </div>
        <div className="group-middle">
          <div className="rule-info-area">
            <div>
              <span v-text="rule.crowdName"></span>
            </div>
            <div className="mt-10">
              <div className="weui-flex">
                <div className="weui-flex__item">
                  群名: {group.crowdName}
                </div>
                <div className="weui-flex__item">
                  群主ID: {group.lftid}
                </div>
              </div>
              <div className="weui-flex mt-10">
                <div className="weui-flex__item">
                  玩法名: {rule.confName}
                </div>
                <div className="weui-flex__item">
                  玩法ID: {rule.id}
                </div>
              </div>

              <div className="mt-5"></div>

              <div className="weui-flex mt-5">
                <div className="weui-flex__item">
                  参与局数: {gameVo.innings}
                </div>
                {/* <div className="weui-flex__item">
                  胜率: {gameVo.odds}
                </div> */}
              </div>
              {/* <div className="weui-flex mt-10">
                <div className="weui-flex__item">
                  赢: {gameVo.win_points}
                </div>
                <div className="weui-flex__item">
                  输: {gameVo.lose_points}
                </div>
              </div> */}
            </div>
            <div className="text-center">
              {
                rule.crowdQr ? <img className="rule-crowdQr" src={rule.crowdQr} alt=""></img> : null
              }
            </div>
            <div className="rule-exit-btn text-center" onClick={() => this.setState({showConfirm: true})}>
              <img src="img/group/exit-rule.png?v=20181201" alt=""></img>     
            </div>
          </div>
        </div>
        <div className="usercenter-bottom">
          <img className="bar" src="img/userCenter/info-kuang1.png?v=20181201" alt="" />
          <div className="text">{/*<span>玩法详情</span>*/}
            <img className="bottom-title" src="img/app/bottom-title/play-method.png?v=201811272534" alt=""/>

          </div>
          <NavLink to="/GroupInfo"><img className="back" src="img/app/back.png?v=20181201" alt="" /></NavLink>
        </div>
      </div>
      {
        showConfirm ? <Confirm modalContent="确认退出该玩法吗?"
         closeModal={() => this.setState({showConfirm: false})}
          confirm={this.exitRule.bind(this)}></Confirm> : null
      }
    </div>
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(RuleDetail)